<template>
  <view v-if="mch_list" class="place_order">
    <view class="select_seed_head">
      <view
        class="seed_item"
        v-for="(item, index) in mch_list[0].goods_list"
        :key="index"
      >
        <image :src="item.goods_pic" mode=""></image>
        <view class="item_info">
          <view class="item_title">
            {{ item.goods_name }}
          </view>
          <view class="item_seed_content">
            已选：<text v-for="(it, ind) in attr_list" :key="ind">{{
              it.attr_name
            }}</text>
          </view>
          <view class="item_msg">
            <view class="item_price"> ￥{{ item.price }} </view>
            <!-- <view class="item_num_head">
							<view class="item_num_icon">
								-
							</view>
							<view class="item_num">
								0
							</view>
							<view class="item_num_icon">
								+
							</view>
						</view> -->
          </view>
        </view>
      </view>
    </view>
    <view class="place_order_infos" @click="toAddress()">
      <view class="place_order_title">收货地址</view>

      <view class="address_head" v-if="address.province">
        <view class="address_info">
          <view class="address_name">
            {{ address.name }}<text>{{ address.mobile }}</text>
          </view>
          <view class="address_msg">
            <image src="../static/images/land/address.png" mode=""></image>
            <text
              >{{ address.province }}{{ address.city
              }}{{ address.district }}</text
            >
          </view>
        </view>
        <view class="item_right">></view>
      </view>
      <view class="place_order_items" v-else>
        <view class="item_left">
          <view class="item_title">
            <image src="../static/images/land/address.png" mode=""></image>
          </view>
          <view class="item_content"> 选择收货地址 </view>
        </view>
        <view class="item_right">请选择></view>
      </view>
    </view>
    <view class="place_order_infos">
      <view class="place_order_title">租赁人信息</view>
      <view class="place_order_items">
        <view class="item_left">
          <view class="item_title"> 用户姓名 </view>
          <view class="item_content">
            <input
              type="text"
              v-model="adopt_name"
              placeholder="请输入用户姓名"
            />
          </view>
        </view>
        <view class="item_right">></view>
      </view>
      <view class="place_order_items">
        <view class="item_left">
          <view class="item_title"> 用户电话 </view>
          <view class="item_content">
            <input
              type="text"
              v-model="adopt_mobile"
              placeholder="请输入手机号"
            />
          </view>
        </view>
        <view class="item_rights"
          >授权手机号
          <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
            微信手机号一键绑定
          </button>
        </view>
      </view>
      <view class="place_order_item">
        <view class="item_left">
          <view class="item_title">
            <image
              v-if="check_type == false"
              @click="get_check()"
              src="../static/images/land/no_check.png"
              mode=""
            ></image>
            <image
              v-else
              @click="get_check()"
              src="../static/images/land/check.png"
              mode=""
            ></image>
          </view>
          <view class="item_content">
            我已阅读并同意<text @click="get_adopt_agreement()"
              >《农场协议》</text
            >
          </view>
        </view>
        <!-- <view class="item_right">请选择></view> -->
      </view>
    </view>

    <view class="bottom_button_head">
      <view class="bottom_button_heads">
        <view class="bottom_content">
          合计<text>￥{{ getTotalPrice }}</text>
        </view>
        <view class="bottom_button" @click="submitOrder()"> 提交订单 </view>
      </view>
    </view>
    <!-- 支付类型 -->
    <paySelect :payType="payType" @handleSelect="showPayPopup"></paySelect>

    <view class="m-box" @click="openPop('integral')">
      <view class="let">积分抵扣</view>
      <view class="rig on">
        <view>-¥{{ useIntegral ? integral.forehead : 0 }}</view>
        <i class="iconfont icon-arrow-right"></i>
      </view>
    </view>

    <integralUsePopup
      ref="integral"
      :useIntegral="useIntegral"
      :price="integral.forehead"
      v-if="integral"
      @confirm="(e) => popConfirm(e, 'integral')"
    ></integralUsePopup>
    <!-- 支付类型选择弹框 -->
    <!-- <payWayPopup
		  ref="pay_type_list"
		  :pay_type_list="pay_type_list"
		  :payType="payType"
		  @payTypeSelect="payTypeSelect"
		></payWayPopup> -->

    <!-- 支付类型选择弹框 -->
    <newPayWayPopup
      :showPopup="showPayWayPopup"
      :payWayList="pay_type_list"
      :current="payType"
      @payTypeSelect="payTypeSelect"
      @closePopup="showPayWayPopup = false"
    ></newPayWayPopup>
  </view>
</template>

<script>
import newPayWayPopup from "@/components/popups/payWayPopup.vue";
import paySelect from "../components/pay-order/pay-select.vue";
import adopt_order from "@/api/livestockAdoption/adopt_order.js";
import integralUsePopup from "./components/integralUsePopup";

export default {
  data() {
    return {
      mch_list: null, // 初始化数据,订单商家列表
      submitParams: "", //原始提交参数
      address: {}, // 收货地址
      check_type: false,
      pay_type_list: null, // 支付方式
      payType: "", // 支付方式
      showPayWayPopup: false,
      submitData: null, // 提交地址
      attr_list: [],
      adopt_name: "", //用户姓名
      adopt_mobile: "", //手机号
      tamplate_id: [],

      useIntegral: false,
      integral: null,
    };
  },
  components: {
    newPayWayPopup,
    paySelect,
    integralUsePopup,
  },
  onLoad(e) {
    var obj = JSON.parse(e.obj);
    this.submitParams = JSON.stringify(obj.submit);
    this.attr_list = obj.attr_list;
    this.get_address();
  },
  onShow() {
    this.get_submit_preview();
  },

  computed: {
    getTotalPrice() {
      if (this.mch_list) {
        let price = parseFloat(this.mch_list[0].goods_list[0].price);

        if (this.useIntegral) {
          price -= parseFloat(this.integral.forehead);
        }
        return price.toFixed(2);
      }
      return 0;
    },
  },
  created(e) {},
  filters: {},
  methods: {
    //提交订单
    submitOrder() {
      var that = this;
      if (this.adopt_name == "") {
        uni.showToast({
          title: "请输入用户姓名",
          icon: "none",
        });
        return;
      }
      if (this.adopt_mobile == "") {
        uni.showToast({
          title: "请输入用户电话",
          icon: "none",
        });
        return;
      }
      if (this.check_type == false) {
        uni.showToast({
          title: "请勾选用户协议",
          icon: "none",
        });
        return;
      }

      uni.requestSubscribeMessage({
        tmplIds: this.tamplate_id,
        complete() {
          that.submitOrderInfo();
        },
      });
    },
    submitOrderInfo() {
      let mch_list = JSON.parse(JSON.stringify(this.mch_list));

      if (this.useIntegral) {
        mch_list[0].integral = this.integral;
        mch_list[0].use_integral = 1;
      }

      var submitDataInfo = {
        mch_list: JSON.stringify(mch_list),
        address_id: this.address.id,
        payment: this.submitData.payment,
        adopt_name: this.adopt_name,
        adopt_mobile: this.adopt_mobile,
      };

      // const res = await adopt_order.submit(submitDataInfo);
      adopt_order.submit(submitDataInfo).then((res) => {
        if (res.code == 0) {
          // 如果是货到付款订单跳转订单列表
          if (submitDataInfo.payment == 2) {
            return this.$utils.toUrl(`/livestockAdoption/my_order/my_order`);
          }
          // 如果是朋友代付跳转代付页面
          if (submitDataInfo.payment == 7) {
            return this.$utils.toUrl(
              `/order/pay-another/pay-another?orderId=${res.data.order_id}`
            );
          }
          let params = {
            payData: {
              pay_type: this.payType,
              order_id: res.data.order_id,
              order_id_list: res.data.order_id_list || "",
            },
            backUrl: "/livestockAdoption/my_order/my_order",
            pay_type_list: this.pay_type_list,
            pay_price: this.getTotalPrice,
            createDate: res.data.add_time,
          };
          this.$utils.toUrl(
            `/other/pay/pay?data=${JSON.stringify(params)}`,
            "redirectTo"
          );
        }
      });
    },
    //拿到缓存地址
    get_address() {
      var address_id = 0,
        address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
      if (address) {
        address_id = JSON.parse(address).id;
        uni.removeStorageSync("SELECT_ORDER_ADDRESS");
        this.address = JSON.parse(address);
      }
    },
    // 选择支付方式回调
    payTypeSelect(e) {
      this.payType = e.type;
      this.submitData.payment = e.type;
      this.showPayWayPopup = false;
    },
    // 显示支付弹框
    showPayPopup() {
      // this.$refs.pay_type_list.setShowPayPopup();
      this.showPayWayPopup = !this.showPayWayPopup;
    },
    // 勾选农场协议
    get_check() {
      this.check_type = !this.check_type;
    },
    //农场协议
    get_adopt_agreement() {
      uni.navigateTo({
        url:
          "../adopt_agreement/adopt_agreement?agreement_id=" +
          this.mch_list[0].agreement_id,
      });
    },
    // 手机号授权
    getPhoneNumber(e) {
      var that = this;
      if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
      } else {
        uni.login({
          provider: "weixin",
          success({ errMsg, code }) {
            if (errMsg == "login:ok") {
              uni.showToast({
                title: "授权成功",
                icon: "none",
              });
              var userInfo = uni.getStorageSync("userInfo");
              that.adopt_mobile = userInfo.binding;
            }
          },
        });
      }
    },
    toAddress() {
      uni.navigateTo({
        url: "/user/my/addressmanage?is_order=1",
      });
    },
    async get_submit_preview() {
      try {
        var params = {
          mch_list: this.submitParams,
        };
        const res = await adopt_order
          .submit_preview(params)
          .catch((error) => error);
        if (res.code == 0) {
          // 赋值支付方式列表
          this.pay_type_list = res.data.pay_type_list;
          this.payType = res.data.pay_type_list[0].payment || -1;
          // 设置默认支付方式
          this.address = res.data.address;

          var mch_list = JSON.parse(JSON.stringify(res.data.mch_list));
          this.mch_list = mch_list;
          this.$set(this.mch_list[0], "remark", "");
          let arr = new Array(mch_list.length).fill(false);
          this.send_type_arr = arr;
          this.integral = res.data.integral;
          // 生成提交数据
          this.submitData = {
            address_id: res.data.address ? res.data.address.id : 0,
            mch_list: mch_list,
            use_integral: 0,
            payment: res.data.pay_type_list[0].payment || -1,
          };
          this.tamplate_id = res.data.template_id;
          if (this.is_delivery == 1) {
            let submitOrderData = JSON.parse(JSON.stringify(this.submitData));
            submitOrderData.mch_list = JSON.stringify(submitOrderData.mch_list);
            this.$allrequest.order
              .preSubmitOrder(submitOrderData, true)
              .then((preRes) => {
                if (preRes.data.resultcode == 0) {
                  this.delivery_price = preRes.data.fee;
                } else {
                  uni.showToast({
                    title: this.$t("order.fail"),
                    duration: 2000,
                  });
                }
              });
          } else {
          }
          this.show_page = true;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 2000);
        }
      } catch (e) {
      }
    },

    openPop(el) {
      switch (el) {
        case "integral":
          this.$refs.integral.showPopup();
          break;

        default:
          break;
      }
    },

    popConfirm(e, el) {
      switch (el) {
        case "integral":
          this.$refs.integral.hidePopup();
          this.useIntegral = e.status;
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.item_num {
  width: 70rpx;
  text-align: center;
  border-left: 1rpx solid #d3d3d3;
  border-right: 1rpx solid #d3d3d3;
}

.item_num_icon {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
}

.item_num_head {
  border-radius: 10rpx;
  border: 1rpx solid #d3d3d3;
}

.item_price {
  color: rgb(240, 33, 10);
  font-weight: 600;
  font-size: 34rpx;
}

.item_num_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item_msg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item_seed_content {
  color: #939393;
  font-size: 25rpx;
  padding: 20rpx 0;
}

.item_title {
  color: #000000;
}

.item_info {
  width: 75%;
  margin-left: 20rpx;
}

.seed_item image {
  width: 150rpx;
  height: 150rpx;
}

.seed_item {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.select_seed_head {
  width: 100%;
  background: #ffffff;
  padding: 20rpx 0;
  margin-top: 20rpx;
}

.address_msg text {
  color: #7d7d7d;
  font-size: 25rpx;
  margin-left: 20rpx;
}

.address_msg image {
  width: 30rpx;
  height: 30rpx;
}

.address_msg {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.address_name text {
  margin-left: 20rpx;
}

.address_name {
  color: #7d7d7d;
  font-size: 25rpx;
}

.address_info {
}

.address_head {
  width: 95%;
  padding: 20rpx 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.seed_head_price {
  font-size: 20rpx;
  color: #9c9c9c;
}

.seed_head_title {
  margin-left: 15rpx;
  color: #000000;
}

.seed_head_img image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 25rpx;
}

.seed_head_img {
  display: flex;
  align-items: center;
}

.seed_head {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 20rpx 0;
}

.bottom_button {
  padding: 25rpx 50rpx;
  border-radius: 90rpx;
  color: #ffffff;
  background-image: linear-gradient(rgb(85, 177, 85), rgb(111, 215, 72));
}

.bottom_content text {
  font-size: 50rpx;
  font-weight: 600;
}

.bottom_button_heads {
  width: 95%;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
}

.bottom_button_head {
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}

.item_rights button {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.item_rights {
  padding: 10rpx 30rpx;
  border-radius: 90rpx;
  color: #ffffff;
  background-image: linear-gradient(rgb(85, 177, 85), rgb(111, 215, 72));
  position: relative;
}

.item_right {
  color: #6a6a6a;
}

.item_content text {
  color: #007aff;
}

.item_content {
  color: #6a6a6a;
  margin-left: 20rpx;
}

.item_title image {
  width: 40rpx;
  height: 40rpx;
}

.item_title {
  color: #000000;
  display: flex;
  align-items: center;
}

.item_left {
  display: flex;
  align-items: center;
}

.place_order_items {
  width: 95%;
  height: 100rpx;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #d5d5d5;
}

.place_order_item {
  width: 95%;
  height: 100rpx;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.place_order_title {
  width: 95%;
  height: 100rpx;
  font-weight: 600;
  font-size: 35rpx;
  margin: auto;
  line-height: 100rpx;
}

.place_order_infos {
  width: 100%;
  background: #ffffff;
  margin-top: 20rpx;
}

.place_order_info {
  width: 100%;
  background: #ffffff;
}

.place_order {
  width: 100%;
  height: 100vh;
  background: #f0f0f0;
  padding-bottom: 200rpx;
}

.m-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background: #fff;
  height: 80rpx;
  border-bottom: 1rpx solid #d5d5d5;
  .rig {
    display: flex;
    align-items: center;

    &.on {
      color: rgba(240, 33, 10, 1);
    }
  }

  .icon-arrow-right {
    font-size: 22rpx;
    color: rgba(205, 205, 205, 1);
  }
}
</style>
